<template>
    <div class="video">
        <VideoPlayer
          :src="url"
          :poster="cover"
          controls
          :playbackRates="[0.5, 1.0, 1.5, 2.0]"
          autoplay="auto"
          :muted="false"
          preload="auto"
          language="zh-CN"
          crossOrigin="anonymous"
          useCredentials="true"
          aspectRatio="16:9"
          fluid="true"
          :playsinline="true"
          notSupportedMessage="此视频暂无法播放😠,请稍后再试或联系管理员sube:z397503810@163.com"
          :controlBar="controlBar"
          />
    </div>
</template>
  
  <script setup>
  import { reactive } from './vue-demi/lib/index';
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'
  
  const props = defineProps({
    url: {
        type: String,
        required: true,
    },
    cover: {
        type: String,
        required: false,
        default: 'https://film.batariya.top/media/movie/20220904/af6f276f-7337-4293-a8ff-dd29e95fe2af.jpeg',
    },
  });

  const controlBar = reactive({
      timeDivider: true, // 当前时间和持续时间的分隔符
      durationDisplay: true, // 显示持续时间
      remainingTimeDisplay: true, // 是否显示剩余时间功能
      fullscreenToggle: true, // 是否显示全屏按钮
    });
  </script>
  
  <style scoped>
  .video {
      width: 100%;
      height: auto;
      z-index: 999;
  }
  </style>